<template>
	<view class="page">
		<uni-nav-bar background-color="#00a9ff" title="登录" color="white" :fixed="true"
		  statusBar="true" left-icon="left" @clickLeft="back"/>
		
		<image src="../../static/logo.png" class="mainlogo"></image>
		
		<view class="input-item">
			<input class="inputBox" type="number" v-model="userid" placeholder="请输入账号" placeholder-style="color:rgba(162, 140, 156, 0.7); font-size:15px"/>
		</view>	
		<view class="input-item">
			<input class="inputBox" type="password" v-model="password" placeholder="请输入密码" placeholder-style="color:rgba(162, 140, 156, 0.7); font-size:15px"/>
		</view>
		 
		<button class="btn" @click="login">
			<text space="emsp">登 录</text>
		</button>
		
		<view style="display: flex;">
			<view class="forgetPsw" @click="forgotPassword">
				<text class="forgetPsw">忘记密码</text>
			</view>
			
			<view class="register_btn">
				<text class="register_btn" @click="goToRegister">注册账号</text>
			</view>
		</view>	
	</view>
</template>

<script>
import axios from 'axios'
	export default {
		data() {
			return {
				userid:'',
				password:'',
				loading: false,
			};
		},
		methods: {
			login()
			{
				if(!this.userid||!this.forgotPassword)
				{
					uni.showToast({
						title:'请填写用户id和密码',
						icon:'none'
					})
					return
				}
				//发送请求验证用户
				axios.post('/api/user/login',{
					Userid:this.userid,
					Password:this.password
				}).then(res => {
					console.log(res.data.code)
					if(res.data.code === 200)
					{//将用户信息保存到客户端本地缓存中
						uni.setStorageSync('userInfo', 
						{
						id: res.data.data.id,
						userid: res.data.data.userid,
						password: res.data.data.password,
						username: res.data.data.username
						})
					//跳转到首页
					uni.navigateTo({url: '/pages/index/index'})
					} 
					else {
					          uni.showToast({
					            title: res.data.message,
					            icon: 'none'
							})
				}
				}).catch(err => {
					uni.showToast({
						title:'目前请求失败，请耐心尝试',
						icon:'none'
					})
				})
			},
			goToRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			forgotPassword(){
				uni.navigateTo({
					url:'/pages/modifyPsw/modifyPsw'
				})
			},
			back(){
				uni.navigateBack();
			}
		} 
	}
</script>

<style>
	
.mainlogo{
	width: 400rpx;
	height: 400rpx;
	display: flex;	
	margin:100rpx auto;
	border-radius: 100%;
}
.inputBox{
	background-color: #fff;
	display: flex;
	width: 270px;
	height: 50px;
	margin: 20px auto;
	border: solid #06061f9 ;
	border-radius: 5px;
	padding-left: 20px;
	/*font-size: 20px;*/
	/*box-shadow: 3px 3px 2px rgba(168, 140, 158, 0.6);*/
	
}
.login_btn{
	background-color: #00a9ff;
	/*background-image: linear-gradient(to top, #ffa9a6, #ff2c41);*/
	color: white;
	border-radius: 5px;
	width: 200px;
	margin-top: 20px;
}
.register_btn{
	font-size: 30rpx;
	color: #00a9ff;
	text-decoration: underline;
	display: flex;
	margin: 20px auto;	
	margin-top: 10rpx;
}
.register_btn:active{
	color: #b8393b;
}
.forgetPsw{
	font-size: 30rpx;
	color: #999999;
	display: flex;
	margin: 20px auto;	
	margin-top: 10rpx;	
}
</style>